<template>
  <div class="dashboard-editor-container">

    <el-page-header @back="goBack" :content="$t('route.view_unique_result')">
    </el-page-header>

    <el-row :span="24">
      <el-col :span="24" style="text-align: right;">
        <el-button :key="2" @click="explodefile">
          <i class="el-icon-scissors"></i>
          {{ $t('uniqueTask.createSplit') }}
        </el-button>
        <el-button type="primary" :key="1" @click="download">
          <i class="el-icon-download"></i>
          {{ $t('v520.downloadResult') }}
        </el-button>
      </el-col>
      <el-row :span="24" :gutter="20" style="margin-top: 20px;">
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <span style="font-weight: bold;margin-right: 7px;">{{ $t('v520.taskState') }}</span>
          <el-tag v-if="jobInfo.status == 0">{{ $t('v520.waitToRun') }}</el-tag>
          <el-tag v-if="jobInfo.status == 1" type="warning">{{ $t('v520.running') }}</el-tag>
          <el-tag v-if="jobInfo.status == 2" type="success">{{ $t('v520.success') }}</el-tag>
          <el-tag v-if="jobInfo.status == 3" type="danger">{{ $t('v520.Failure') }}</el-tag>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.taskName') }}</b>
          {{ jobInfo.job_name }}
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.createTime') }}</b>
          {{ jobInfo.createtime }}
        </el-col>
      </el-row>
      <el-row :span="24" :gutter="20" style="margin-top: 20px;">
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.sourcePhoneNum') }}</b>
          {{ jobInfo.job_result.phone_amount }}
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.errorPhone') }}</b>
          {{ jobInfo.job_result.phone_error }}
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.repeatPhone') }}</b>
          {{ jobInfo.job_result.phone_repeat }}
        </el-col>
      </el-row>
      <el-row :span="24" :gutter="20" style="margin-top: 20px;">
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.registered') }}</b>
          {{ jobInfo.job_result.phone_reg }}
        </el-col>
      </el-row>
    </el-row>

    <el-card class="box-card" :loading="loading" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>{{ $t('v520.filterResult') }}</span>
      </div>
      <div ref="echart" style="width: 100%;height: 400px;margin-top: 20px;"></div>
    </el-card>

  </div>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons')
import { info,splitResult } from '@/api/jobs'

export default {
  name: 'uniquephoneViewResult',
  created() {
    this.id = this.$route.params.id
    if (!this.$route.params.id || this.$route.params.id == 0 || this.$route.params.id == undefined) {
      this.$notify.error({ title: '请求失败', message: '任务id为无效id' })
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    }
    // _this.loading = this.$loading({
    //   lock: true,
    //   text: 'Loading',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // });
  },
  data() {
    return {
      id: 0,
      chartData: [],
      labels: [],
      datas: [],
      loading: true,
      jobInfo: {
        job_result: {
          phone_error: 0,
          phone_repeat: 0,
          phone_reg: 0,
          phone_num: 0
        }
      }
    }
  },
  mounted() {
    let _this = this
    this.$nextTick(() => {
      _this.getChart()
      _this.loading = false
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.echart, 'macarons')
      this.setOptions()
    },
    setOptions() {
      let _this = this
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: [_this.$t('uniqueTask.invalid'), _this.$t('uniqueTask.duplicate'), _this.$t('uniqueTask.registered'), _this.$t('uniqueTask.available')]
        },
        series: [
          {
            name: _this.$t('v520.filterResult'),
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            data: [
              { value: _this.jobInfo.job_result.phone_error, name: _this.$t('uniqueTask.invalid') },
              { value: _this.jobInfo.job_result.phone_repeat, name: _this.$t('uniqueTask.duplicate') },
              { value: _this.jobInfo.job_result.phone_reg, name: _this.$t('uniqueTask.registered') },
              { value: _this.jobInfo.job_result.phone_num, name: _this.$t('uniqueTask.available') }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    },
    getChart() {
      let _this = this
      info({ id: _this.id }).then(res => {
        if (res.code == 0) {
          _this.jobInfo = res.data
          _this.initChart()
        } else {
          this.$notify.error({ title: '请求失败', message: res.msg })
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.go(-1)
        }
      })
    },
    goBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    download() {
      if (!this.jobInfo.job_result.file_url || this.jobInfo.job_result.file_url == '' || this.jobInfo.job_result.file_url == undefined) {
        this.$notify.error({
          title: this.$t('v520.downloadFail'),
          message: '暂无结果可以下载'
        })
        return
      }

      if (!this.jobInfo.job_result.phone_num || this.jobInfo.job_result.phone_num == 0) {
        this.$notify.warning({
          title: this.$t('v520.downloadFail'),
          message: this.$t('v520.nontPhone')
        })
        return
      }

      var win = window.open()
      win.location.href = this.jobInfo.job_result.file_url

    },
    explodefile(){

      if (!this.jobInfo.job_result.file_url || this.jobInfo.job_result.file_url == '' || this.jobInfo.job_result.file_url == undefined) {
        this.$message.warning('pls wait load data!');
        return
      }

      if (!this.jobInfo.job_result.phone_num || this.jobInfo.job_result.phone_num == 0) {
        this.$message.warning(this.$t('v520.nontPhone'));
        return
      }

      this.$prompt(this.$t('explodeFile.splitNum'), 'Split', {
        confirmButtonText: this.$t('v520.confirm'),
        cancelButtonText: this.$t('v520.cancel')
      }).then(({ value }) => {
        const requestLoading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        splitResult({id:this.id,splitNum:value}).then(res => {
          requestLoading.close();
          if(res.code == 0){
            this.$notify({
              title: this.$t('v520.requestResult'),
              message: this.$t('uniqueTask.splitSuccess'),
              type: 'success'
            });
            this.$confirm(this.$t('uniqueTask.gotoSplitIndex'), this.$t('v520.tips'), {
              confirmButtonText: this.$t('v520.confirm'),
              cancelButtonText: this.$t('v520.cancel'),
              type: 'warning'
            }).then(() => {
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.push({ path: '/explodefile/index' })
            }).catch(() => {

            });
          }else{
            this.$notify({
              title: this.$t('v520.requestResult'),
              message: res.msg,
              type: 'error'
            });
          }
        });
      }).catch(() => {

      });
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #FFF;
  min-height: 100vh;
  padding: 10px 20px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
